<template>
	<div class="ImgBg">
		<div style="height: 80px;">
			<div class="topBar">
				<div class="secondBar">
					<div class="imgBox">
						<img style="height: 60px;width: 100px;" src="../../../assets/img/baoxian.png" />
					</div>
					<div class="lineBar"></div>
					<span class="title">惠企链惠单平台</span>
				</div>
			</div>
		</div>

		<div class="fatherBox" v-if="!confirmStatus">
			<!-- <div style="width: 100%;height: 80px;border-bottom: 1px solid #EEEEEE;">
				<el-steps style="margin-top: 30px;" :active="1" align-center>
					<el-step title="设置企业信息"></el-step>
					<el-step title="设置用户信息"></el-step>
					<el-step title="提交认证资料"></el-step>
					<el-step title="等待审核"></el-step>
				</el-steps>
			</div> -->
			<div style="height: 120px;width: 100%;">
				<div style="width: 240px;height: 120px;margin: 0 auto;display: flex;">
					<div style="width: 60px;height: 3px;background-color: #1890FF;align-self: center;"></div>
					<div style="font-size: 20px;font-weight: bold;line-height: 120px;padding: 0 20px 0 20px;">注册信息</div>
					<div style="width: 60px;height: 3px;background-color: #1890FF;align-self: center;"></div>
				</div>
			</div>
			<el-form status-icon :model="dataForm" :rules="rules" ref="dataForm" label-width="100px"
				class="demo-ruleForm">
				<el-form-item label="企业名称" prop="customerID">
					<!-- <el-input v-model="dataForm.companyName"></el-input> -->
					<el-select clearable style="width: 70%;" v-model="dataForm.customerID" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<el-button style="margin-left: 20px;" size="small" @click.prevent="addNewCompany">新增企业名称</el-button>
				</el-form-item>
				<el-form-item prop="companyName" v-for="(item, index) in newCompany" :label="'企业名称'">
					<el-input placeholder="请输入企业名称" style="width: 70%;" v-model="dataForm.companyName"></el-input>
					<el-button style="margin-left: 20px;" size="small" @click.prevent="removeNewCompany">删除</el-button>
				</el-form-item>
				<el-form-item label="您的姓名" prop="userName">
					<el-input placeholder="请输入姓名" v-model="dataForm.userName"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="phone">
					<el-input placeholder="手机号" v-model="dataForm.phone"></el-input>
				</el-form-item>
				<el-form-item label="登录密码" prop="passWord">
					<el-input placeholder="请输入登陆密码" autocomplete="off" type="password" v-model="dataForm.passWord">
					</el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="confirmPassword">
					<el-input placeholder="请输入确认密码" autocomplete="off" type="password"
						v-model="dataForm.confirmPassword"></el-input>
				</el-form-item>
				<!-- <el-form-item label="验证码" prop="code">
					<el-input style="width: 70%;" v-model="dataForm.code"></el-input>
				</el-form-item>
				<el-form-item label="短信验证码" prop="phoneCode">
					<el-input style="width: 70%;" v-model="dataForm.phoneCode"></el-input>
					<el-button style="margin-left: 20px;" type="primary" size="small">获取验证码</el-button>
				</el-form-item> -->
			</el-form>
			<div style="width: 28%;height: 30px;margin: 0 auto;display: flex;">
				<el-checkbox v-model="checked">请您阅读并同意</el-checkbox>
				<div style="font-size: 14px;color: #1890FF;" @click="centerDialogVisible = true">《平台信单使用协议》</div>
			</div>
			<div style="width: 12%;height: 40px;margin: 0 auto;display: flex;margin-top: 30px;margin-bottom: 50px;">
				<el-button type="primary" @click="submitForm('dataForm')" size="medium">立即注册</el-button>
				<el-button type="infor" size="medium" @click="resetForm('dataForm')">重置</el-button>
			</div>
		</div>
		<div class="fatherBox" v-else>
			<div
				style="width: 95%;height: 200px;margin: 0 auto;background-color: #E9F4FC;margin-top: 30px;display: flex;">
				<div style="width: 15%;height: 200px;display: flex;">
					<!-- <div style="height: 100px;width: 100px;margin: 0 auto;background-color: #30B08F;align-self: center;"></div> -->
					<img style="height: 100px;width: 100px;margin: 0 auto;align-self: center;"
						src="../../../assets/img/success.png">
				</div>
				<div style="width: 85%;height: 200px;">
					<div style="font-size: 35px;color: #5FA0A7;font-weight: bold;margin-top: 70px;">恭喜，注册成功</div>
					<div style="font-size: 17px;color: #5FA0A7;margin-top: 10px;">您已经成功注册成为信单平台用户，下次登录请使用已注册的手机号及密码
					</div>
				</div>
			</div>
			<div style="padding: 50px 0 0 16%;letter-spacing: 1px;margin-bottom: 50px;">
				<div style="display: flex;"> 继续完成企业认证，尊享信单服务，助力企业发展。<div style="color: #FD0000;">5</div>
					秒后自动跳转至企业实名认证页面......</div>
				<div style="margin-top: 10px;display: flex;"> 如未跳转，<div style="color: #1890FF;">请点此处</div>
				</div>
			</div>
		</div>
		<el-dialog title="《平台信单使用协议》" :visible.sync="centerDialogVisible" width="70%" center>
			<ul style="overflow:auto;height: 400px;width: 100%;border: 1px solid #EEEEEE;">
				<div>
					《平台信单使用协议》《平台信单使用协议》《平台信单使用协议》
				</div>
			</ul>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
				<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import capitalSearch from '@/api/basic/CustomerApi.js'
	import insertBankUser from '@/api/basic/CustomerApi.js'
	export default {
		data() {
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.dataForm.passWord) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				newCompany: [],
				options: [{
					value: '选项1',
					label: '企业1'
				}, {
					value: '选项2',
					label: '企业2'
				}, {
					value: '选项3',
					label: '企业3'
				}, {
					value: '选项4',
					label: '企业4'
				}, {
					value: '选项5',
					label: '企业5'
				}],
				value: '',
				centerDialogVisible: false, //弹窗是否打开
				gotop: false, //回到顶部
				checked: false, //是否点击信单checkBox
				confirmStatus: false, //是否提交成功
				dataForm: {
					companyName: '', //企业名称
					customerID: '', //企业ID
					userName: '', //姓名
					phone: '', //手机号
					passWord: '', //密码
					confirmPassword: '', //确认密码
					// code: '', //验证码
					// phoneCode: '' //短信验证码
				},
				rules: {
					companyName: [{
							required: true,
							message: '请输入企业名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 25,
							message: '长度在 3 到 25 个字符',
							trigger: 'blur'
						}
					],
					customerID: [{
						required: true,
						message: '请选择企业名称',
						trigger: 'blur'
					}],
					userName: [{
							required: true,
							message: '请输入您的姓名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 25 个字符',
							trigger: 'blur'
						}
					],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							min: 11,
							max: 11,
							message: '请输入合理的手机号',
							trigger: 'blur'
						}
					],
					passWord: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 25,
							message: '长度在 3 到 25 个字符',
							trigger: 'blur'
						}
					],
					confirmPassword: [{
							required: true,
							validator: validatePass2,
							trigger: 'blur'

						},
						{
							min: 3,
							max: 25,
							message: '长度在 3 到 25 个字符',
							trigger: 'blur'
						}
					],
					// code: [{
					// 		required: true,
					// 		message: '请输入验证码',
					// 		trigger: 'blur'
					// 	},
					// 	{
					// 		min: 3,
					// 		max: 25,
					// 		message: '长度在 3 到 25 个字符',
					// 		trigger: 'blur'
					// 	}
					// ],
					// phoneCode: [{
					// 		required: true,
					// 		message: '请输入短信验证码',
					// 		trigger: 'blur'
					// 	},
					// 	{
					// 		min: 3,
					// 		max: 25,
					// 		message: '长度在 3 到 25 个字符',
					// 		trigger: 'blur'
					// 	}
					// ]
				}
			}
		},
		mounted() {
			document.querySelector('body').setAttribute('style', 'background-color:#F5F7FA')
			window.addEventListener("scroll", this.handleScroll, true);
		},
		beforeDestroy() {
			document.querySelector('body').removeAttribute('style')
		},
		created() {
			this.getCustmorSearch();
		},
		methods: {
			addNewCompany() {
				if (this.newCompany == '') {
					this.newCompany.push(1)
					this.rules.customerID[0].required = false
				}
			},
			removeNewCompany() {
				this.dataForm.companyName = '';
				this.rules.customerID[0].required = true
				this.newCompany = []
			},
			getCustmorSearch() {
				capitalSearch.list().then(res => {
					console.log(res)
				})
			},
			open() {
				this.$alert('请阅读平台信单使用协议', '提示', {
					confirmButtonText: '确定',
					type: 'warning'
				});
			},
			handleScroll() { //回到顶部
				let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
				scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
			},
			toTop() { //回到顶部
				let top = document.documentElement.scrollTop || document.body.scrollTop;
				// 实现滚动效果
				const timeTop = setInterval(() => {
					document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
					if (top <= 0) {
						clearInterval(timeTop);
					}
				}, 10);
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.checked) {
							this.confirmStatus = !this.confirmStatus
							this.toTop();
							setTimeout(() => {
								this.$router.push({
									path: '/companyRegister'
								})
							}, 5000)
						} else {
							this.open();
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		},
	}
</script>

<style>
	.ImgBg {
		height: 900px;
		width: 100%;
	}

	.topBar {
		position: fixed;
		top: 0;
		height: 80px;
		width: 100%;
		background-color: #FFFFFF;
		box-shadow: 0px 5px 19px 0px #b8b8b8;
		z-index: 999;
	}

	.secondBar {
		width: 90%;
		height: 80px;
		margin: 0 auto;
		display: flex;
	}

	.imgBox {
		width: 100px;
		height: 60px;
		/* margin-top: 10px; */
		align-self: center;
	}

	.lineBar {
		height: 35px;
		width: 2px;
		background-color: #001528;
		align-self: center;
		margin-left: 20px;
	}

	.title {
		margin-left: 20px;
		font-size: 25px;
		font-weight: bold;
		align-self: center;
	}

	.fatherBox {
		width: 90%;
		margin: 0 auto;
		margin-top: 5%;
		background-color: #FFFFFF;
		border: 1px solid #EEEEEE;
	}

	.fatherBox1 {
		width: 90%;
		margin: 0 auto;
		margin-top: 5%;
		background-color: #FFFFFF;
		border: 1px solid #EEEEEE;
	}

	.demo-ruleForm {
		width: 50%;
		margin: 0 auto;
	}
</style>
